<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleClick">
        <el-menu-item index="99">
          {{ $t('table.all') }}
        </el-menu-item>
        <el-menu-item index="0">未派单</el-menu-item>
        <el-menu-item index="1">待接单</el-menu-item>
        <el-menu-item index="2">服务中</el-menu-item>
        <el-menu-item index="3">已完成</el-menu-item>
        <el-menu-item index="4">取消</el-menu-item>
      </el-menu>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="3">
          <el-input v-model="query.ordernum" type="text" placeholder="预约单号" />
        </el-col>
        <el-col :span="3">
          <el-input v-model.number="query.mid" type="text" :placeholder="$t('table.mid')" />
        </el-col>
        <el-col :span="3">
          <el-input v-model="query.express_no" type="text" placeholder="联系号码" />
        </el-col>
        <el-col :span="4">
          <el-date-picker v-model="query.createtime_s" type="datetime" placeholder="最早下单时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-col>
        <el-col :span="4">
          <el-date-picker v-model="query.createtime_e" type="datetime" placeholder="最晚下单时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-col>
        <el-col :span="3">
          <el-select v-model.number="query.bid" style="width: 100%;" :placeholder="$t('table.selectThe')+'服务商'">
            <el-option v-for="(item,index) in bulist" :key="index" :value="item.id" :label="item.name" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 订单导出数据表 -->
      <el-row style="margin-top: 20px;">
        <el-col v-if="query.status===2" :span="3">
          <el-button type="primary" icon="el-icon-document" :disabled="!checkPermission('orderyue-wan')" @click="getSelected">批量完成预约</el-button>
        </el-col>
        <el-col :span="3">
          <el-button v-if="query.status===0||query.status===1||query.status===2" type="danger" icon="el-icon-document" :disabled="!checkPermission('orderyue-export')" @click="getEx">导出预约单</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="downLoadLoading" tooltip-effect="dark" border :data="list" max-height="620px" style="margin-top: 20px;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="id" sortable="custom" width="60" align="center" />
        <el-table-column label="项目名称" prop="name" width="180" align="center" />
        <el-table-column :label="$t('table.ordernum')" prop="ordernum" width="140" align="center" />
        <el-table-column label="预约单号" prop="yyue_order" width="140" align="center" />
        <el-table-column label="用户昵称" prop="nickname" align="center" />
        <el-table-column label="服务次数" prop="num">
          <template slot-scope="{row}">
            {{ row.y_num }}/{{ row.num }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.state')" prop="status" align="center" width="150">
          <template slot-scope="{row}">
            <el-tag :type="row.status|statusFilter">
              {{ row.status|YueStatusData }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="预约时间" prop="yu_yue_date" width="200" align="center">
          <template slot-scope="{row}">
            <div style="text-align: left;">{{ row.yu_yue_date }} {{ row.start_default_time }}～{{ row.end_default_time }}</div>
          </template>
        </el-table-column>
        <el-table-column label="预约信息" prop="linkman" width="260" align="center">
          <template slot-scope="{row}">
            <div style="display: flex;align-items:center;font-size:14px">
              <div style="font-weight: bold;">{{ row.linkman }}</div>
              <div style="font-size: 12px;">--{{ row.tel }}</div>
            </div>
            <div style="text-align: left;">{{ row.province }}{{ row.city }}{{ row.district }}{{ row.area }}{{ row.address }}{{ row.house_number }}</div>
          </template>
        </el-table-column>
        <el-table-column label="预约备注" prop="remark" align="center" width="180" />
        <el-table-column label="单次金额" prop="sell_price" align="center" width="110">
          <template slot-scope="{row}">
            ¥ {{ row.sell_price }}
          </template>
        </el-table-column>
        <el-table-column label="服务结算价" prop="cost_price" align="center" width="120">
          <template slot-scope="{row}">
            ¥ {{ row.cost_price }}
          </template>
        </el-table-column>
        <el-table-column label="接单时间" prop="jie_time" width="160" align="center">
          <template slot-scope="{row}">
            {{ row.jie_time|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column label="完成时间" prop="endtime" width="160" align="center">
          <template slot-scope="{row}">
            {{ row.endtime|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.Order_time')" prop="createtime" width="160" align="center">
          <template slot-scope="{row}">
            {{ row.createtime|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="240">

          <template slot-scope="{row}">
            <el-button icon="el-icon-tickets" type="success" size="mini" style="margin-bottom: 10px;" @click="open('show',row)">{{ $t('button.show') }}</el-button>
            <el-button v-if="row.status===0||row.status===1||row.status===2" size="mini" type="warning" :disabled="!checkPermission('orderfu-pai')" @click="open('pai',row)">派单</el-button>
            <el-button v-if="row.status===2" size="mini" type="primary" :disabled="!checkPermission('orderyue-wan')" @click="yue(row)">完成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>
    <!-- 详情 -->
    <el-dialog title="预约详情" width="650px" :visible="showDialog" top="30px" @close="btnCanle">
      <div class="shopOrder-dialog">
        <div class="address-box">
          <div class="address-icon"><img src="@/assets/common/address.png" width="100%"></div>
          <div>
            <div class="address-wen">
              <h1>{{ showData.linkman }}</h1>
              <h1>{{ showData.tel }}</h1>
            </div>
            <div class="address-area">
              <p>{{ showData.province }}{{ showData.city }}{{ showData.district }}{{ showData.area }}{{ showData.address }}{{ showData.house_number }}</p>
            </div>
          </div>
        </div>
        <el-divider />
        <ul class="order_information">
          <li>
            <label>服务名称</label>
            <div class="information-right">
              <p>{{ showData.name }}</p>
            </div>
          </li>
          <li>
            <label>预约人昵称</label>
            <div class="information-right">
              <p>{{ showData.nickname }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.mid') }}</label>
            <div class="information-right">
              <p>{{ showData.mid }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.ordernum') }}</label>
            <div class="information-right">
              <p>{{ showData.ordernum }}</p>
            </div>
          </li>
          <li>
            <label>服务商名称</label>
            <div class="information-right">
              <p>{{ showData.bid_name }}</p>
            </div>
          </li>
          <li>
            <label>服务次数</label>
            <div class="information-right">
              <p>{{ showData.y_num }}/{{ showData.num }}</p>
            </div>
          </li>
          <li>
            <label>预约时间</label>
            <div class="information-right">
              <p>{{ showData.yu_yue_date }} {{ showData.start_default_time }}～{{ showData.end_default_time }}</p>
            </div>
          </li>
          <li>
            <label>单次金额</label>
            <div class="information-right">
              <p>¥ {{ showData.sell_price }}</p>
            </div>
          </li>
          <li>
            <label>服务结算价</label>
            <div class="information-right">
              <p>¥ {{ showData.cost_price }}</p>
            </div>
          </li>
          <li>
            <label>接单时间</label>
            <div class="information-right">
              <p>{{ showData.jie_time|timeStanp }}</p>
            </div>
          </li>
          <li>
            <label>完成时间</label>
            <div class="information-right">
              <p>{{ showData.endtime |timeStanp }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.state') }}</label>
            <div class="information-right">
              <p> {{ showData.status|YueStatusData }}</p>
            </div>
          </li>
          <li>
            <label>用户备注</label>
            <div class="information-right" style="width: 80%;">
              <el-input
                v-model="showData.remark"
                type="textarea"
                disabled
                :rows="3"
                placeholder="请输入内容"
              />
            </div>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="open('beizhu',showData)">{{ $t('button.beizhu') }}</el-button> -->
        <el-button v-if="showData.status===0||showData.status===1||showData.status===2" :disabled="!checkPermission('orderfu-show')" type="warning" @click="open('pai',showData)">派单</el-button>
      </div>
    </el-dialog>
    <!-- 派单 -->
    <el-dialog title="派单" width="650px" :visible="SendDialog" @close="btnCanle1">
      <el-form ref="ruleForm" :model="formSend" label-width="150px">
        <el-form-item label="服务商">
          <el-select v-model="formSend.bid" :placeholder="$t('table.selectThe')+'服务商'">
            <el-option v-for="(item,index) in bulist" :key="index" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model.number="formSend.status" :label="1">待接单</el-radio>
          <el-radio v-model.number="formSend.status" :label="2">服务中</el-radio>
          <el-radio v-model.number="formSend.status" :label="3">已完成</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle1">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="sendConfirm">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetFuYue, PaiDan, getBusiness, EngYeYue } from '@/api/user'
import user from '@/store/modules/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger',
        2: 'warning',
        4: 'info'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      activeIndex: '99',
      downLoadLoading: false,
      mid: undefined,
      query: {
        status: 99,
        ordernum: '',
        mid: undefined,
        bid: undefined,
        express_no: '',
        createtime_s: '',
        createtime_e: '',
        aid: 1,
        page: 1,
        limit: 10
      },
      list: [],
      count: 0,
      bulist: [],
      bucount: 0,
      showDialog: false,
      SendDialog: false,
      showData: {
        fu_tao: [{ pic: '' }],
        fu_xiang: []
      },
      formSend: {
        operator_uid: undefined,
        id: undefined,
        bid: undefined,
        status: 1
      },
      multipleSelection: []
    }
  },
  created() { // 获取userid
    this.mid = parseFloat(user.state.userId)
    this.getShopOrderList()
    this.getFuList()
  },
  methods: {
    // 批量导出
    getEx() {
      const headers = {
        '项目名称': 'name',
        '预约单号': 'yyue_order',
        '客户名字': 'linkman',
        '联系电话': 'tel',
        '服务地址': 'province',
        '预约时间': 'yu_yue_date',
        '预约备注': 'remark'
      }
      const ordernum = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const one = {
          name: this.multipleSelection[i].name,
          yyue_order: this.multipleSelection[i].yyue_order,
          linkman: this.multipleSelection[i].linkman,
          tel: this.multipleSelection[i].tel,
          province: this.multipleSelection[i].province + this.multipleSelection[i].city + this.multipleSelection[i].district + this.multipleSelection[i].area + this.multipleSelection[i].address + this.multipleSelection[i].house_number,
          yu_yue_date: this.multipleSelection[i].yu_yue_date + ' ' + this.multipleSelection[i].start_default_time + '--' + this.multipleSelection[i].end_default_time,
          remark: this.multipleSelection[i].remark
        }
        ordernum.push(one)
      }
      const data = this.formatJson(headers, ordernum)
      // 导出Excel
      import('@/vendor/Export2Excel').then(excel => {
        // excel是引入文件的导出对象
        excel.export_json_to_excel({
          header: Object.keys(headers),
          data: data,
          filename: '预约单信息'
        })
      })
    },
    // 将表头数据和数组进行对应
    formatJson(headers, rows) {
      return rows.map(item => {
        // item 是一个对象
        return Object.keys(headers).map(key => {
          return item[headers[key]]
        })
      })
    },
    // 批量完成预约
    async getSelected() {
      const data = {
        ids: []
      }
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择要完成的数据！')
        return
      }
      this.multipleSelection.forEach(item => {
        data.id.push(item.id)
      })
      try {
        await this.$confirm('确定完成预约，需要在预约时间超过3小时后才可以确认，否则完成无效！')
        await EngYeYue(data)
        this.getShopOrderList()
        this.$message.success('完成！')
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 完成预约
    async yue(row) {
      const one = {
        ids: []
      }
      one.ids.push(row.id)
      try {
        await this.$confirm('确定完成预约，需要在预约时间超过3小时后才可以确认，否则完成无效！')
        await EngYeYue(one)
        // // 更新数据
        this.getShopOrderList()
        this.$message.success('完成！')
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 保存选择对象
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 提交备注
    async sendConfirm() {
      if (this.formSend.bid === undefined) {
        this.$message.error('请选择服务商！')
        return
      }
      try {
        await this.$confirm('确定要派单吗？')
        await PaiDan(this.formSend)
        // // 更新数据
        this.getShopOrderList()
        this.btnCanle()
        this.btnCanle1()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 打开弹框
    open(type, row) {
      if (type === 'show') {
        this.showData = row
        this.showDialog = true
      } else if (type === 'pai') {
        this.formSend.operator_uid = this.mid
        this.formSend.id = row.id
        this.formSend.bid = row.bid
        this.formSend.status = row.status
        this.SendDialog = true
      }
    },
    // 监听tab点击事件
    handleClick(tab, event) {
      this.query.status = parseFloat(tab)
      this.query.page = 1
      this.getShopOrderList()
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getShopOrderList()
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getShopOrderList()
    },
    // 关闭
    btnCanle() {
      this.showDialog = false
      this.showData = {
        fu_tao: [{ pic: '' }],
        fu_xiang: []
      }
    },
    btnCanle1() {
      this.formSend = {
        operator_uid: undefined,
        id: undefined,
        bid: undefined,
        status: 1
      }
      this.SendDialog = false
    },
    // 获取服务商
    async getFuList() {
      const one = {
        aid: 1,
        page: 1,
        limit: 1000,
        status: -2
      }
      const { list, count } = await getBusiness(one)
      this.bulist = list
      this.bucount = count
      this.downLoadLoading = false
    },
    // 获取订单
    async getShopOrderList() {
      this.downLoadLoading = true
      if (this.query.mid < 1) {
        this.query.mid = undefined
      }
      const { list, count } = await GetFuYue(this.query)
      this.list = list
      this.count = count
      this.downLoadLoading = false
    }
  }
})
</script>
<style scoped lang="scss">
.shopGoods-item{
  display: flex;
  margin-bottom: 15px;
  .shopGoos_img{
    width: 80px;
    margin-right: 10px;
  }
  .shopGoos_wen{
    width: 200px;
    font-size: 12px;
    line-height: 18px;
    p{
      margin: 0;
    }
  }
  .goodsPrice{
    color: #f60;
    margin-top: 20px;
  }
}
.address-box{
  display: flex;
  align-items: center;
  .address-icon{
    width: 30px;
    margin-right: 20px;
  }
  .address-wen{
    display: flex;
    align-items: center;
    h1{
      font-size: 16px;
      margin-right: 10px;
    }
  }
  .address-area{
    p{
      margin: 0;
    }
  }
}
.shop-item{
  display: flex;
  margin-bottom: 20px;
  .shop-left{
    width: 100px;
    margin-right: 20px;
  }
  .shop-right{
    width:500px;
    p{
      margin: 0;
    }
    .goodsPrice{
      color: #f60;
      margin-top: 10px;
    }
  }
}
.order_information{
  padding-left: 0;
  margin: 0;
  li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f2f2f2;
    padding:0 0 15px 0;
    .information-right{
      display: flex;
      justify-content: right;
      align-items: center;
      p{
        margin: 0;
      }
      .information-img{
        width: 40px;
        margin-right: 10px;
      }
    }

  }
}
.shopOrder-dialog{
  height: auto;
  max-height: 650px;
  overflow-y: auto;
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
.color-red{
  color: #f60;
}
.form-pic-box{
  display: flex;
  margin-top: 20px;
  .formPic{
    margin-right: 10px;
  }
}
.ljm-table{
  thead{
    tr{
      background-color: #f2f2f2;
      th{
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
        text-align: left;
      }
    }
  }
  tbody{
    tr{
      margin-top: -1px;
      td{
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        .layui-input{
          display: inline;
          height: 30px;
          padding-left: 10px;
          line-height: 1.3;
          border-width: 1px;
          border-style: solid;
          background-color: #fff;
          border-radius: 2px;
          border-color: #e6e6e6;
        }
        div{
          margin: 5px 0px;
          .layui-btn-sm{
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
            margin-left: 5px;
          }
          .layui-btn-primary{
            border: 1px solid #C9C9C9;
            background-color: #fff;
            color: #555;
          }
          .layui-btn {
              display: inline-block;
              white-space: nowrap;
              text-align: center;
              border-radius: 2px;
              cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
